{% extends 'bugs/base.html' %}

{% block content %}
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{% url 'bugs:index' %}">Software Afair Management System</a>
            </div>
        </div>
    </nav>
    <div class="container">
        <legend>project 管理
            <!-- 按钮触发模态框 -->
            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addUserModal">
                添加project
            </button>
        </legend>

        <!--project 首页显示-->
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>path</th>
                <th>team</th>
                <th>type</th>
                <th>DRI</th>
                <th>操作</th>

            </tr>
            </thead>
            <tbody>
            <!-- project 数据 -->
            {% for project in project_data %}
                <tr>
                    <td id="{{ project.id }}">{{ project.id }}</td>
                    <td>{{ project.name }}</td>
                    <td>{{ project.path }}</td>
                    <td>{{ project.team }}</td>
                    <td>{{ project.type }}</td>
                    <td>{{ project.DRI }}</td>
                    <td>
                        <button type="button" class="btn btn-info" data-toggle="modal"
                                onclick="return get_edit_info({{ project.id }})" data-target="#addUserModal">编辑
                        </button>
                        &nbsp;&nbsp;
                        <button type="button" class="btn btn-danger" onclick="return delete_info({{ project.id }})">删除
                        </button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <!-- END project数据 -->

        <!--跳出的模态框-->
        <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            添加 project
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="" class="form-horizontal" role="form" id="form_data"
                              onsubmit="return check_form()" style="margin: 20px;">
                            <div class="form-group" style="display: none">
                                <label for="lastname" class="col-sm-3 control-label">ID</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="pro_id" id="pro_id" value=""/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lastname" class="col-sm-3 control-label">name</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="name" id="name" value=""/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lastname" class="col-sm-3 control-label">path</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="path" name="path" value=""
                                           placeholder="path">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lastname" class="col-sm-3 control-label">team</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="team" value="" id="team"
                                           placeholder="team">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lastname" class="col-sm-3 control-label">type</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="type" value="" id="type"
                                           placeholder="type">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lastname" class="col-sm-3 control-label">DRI</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="DRI" value="" id="DRI"
                                           placeholder="dri">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    提交
                                </button>
                                <span id="tip"> </span>
                            </div>
                        </form>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </div>
        <!--END -- 模态框-->

        <!--分页-->
        <div class="pagination" style="align:right">
                <span class="step-links">
                    {% if project_data.has_previous %}<!--判断是否还有上一页-->
                        <a href="?page=1">&laquo首页</a>
                        <a href="?page={{ project_data.previous_page_number }}">上一页</a>
                    {% endif %}
                </span>
            <span class="current">
                第 {{ project_data.number }} 页
            </span>
            {% if project_data.has_next %}
                <a href="?page={{ project_data.next_page_number }}">下一页</a>
                <a href="?page={{ project_data.paginator.num_pages }}">尾页</a>
            {% endif %}
        </div>
        <!--END 分页------>
    </div>
    <!------------------------------------------------------------------------------->
    <script type="text/javascript">
        // using jQuery
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        var csrftoken = getCookie('csrftoken');

        function csrfSafeMethod(method) {
            // 这些HTTP方法不要求CSRF包含
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });


        // 删除表单
        function delete_info(active_id) {
            if (confirm("确认删除么？")) {
                if (!active_id) {
                    alert('Error!');
                    return false;
                }
                $.ajax({
                    url: "{% url 'bugs:project' %}",
                    data: {"active_id": active_id, "action": 'delete'},
                    type: "POST",
                    dataType: 'json',
                    beforeSend: function () {
                        $("#tip").html("<span style='color:blue'>正在处理...</span>");
                        return true;
                    },
                    success: function (data) {
                        if (data) {
                            alert("操作成功！");
                            $("#tip").html("<span style='color:blueviolet'>恭喜,删除成功!</span>");
                            location.reload();
                        }
                        else {
                            $("#tip").html("<span style='color:blueviolet'>失败,请重试！</span>");
                            alert("操作失败！");
                        }
                    },
                    error: function () {
                        alert("请求出错!");
                    },
                });
            }

            return false;
        }

        // 编辑表单
        function get_edit_info(active_id) {
            console.log('active_id:',active_id);
            if (!active_id) {
                alert('Error!');
                return false;
            }
            $.ajax({
                url: "{% url 'bugs:project' %}",
                data: {"active_id": active_id, "action": "select"},
                type: "post",
                beforeSend: function () {
                    return true
                },
                success: function (res) {
                    console.log('res:',res);
                    if (res) {
                        // 解析json 数据
                        const data = res;
                        const data_obj = eval("(" + data + ")");
                        console.log('data_obj',data_obj);
                        // 赋值
                        $("#pro_id").val(data_obj[0].id);
                        $("#name").val(data_obj[0].name);
                        $("#path").val(data_obj[0].path);
                        $("#team").val(data_obj[0].team);
                        $("#type").val(data_obj[0].type);
                        $("#DRI").val(data_obj[0].DRI);

                    }
                    else {
                        $('#tip').html("<span style='color:red'>失败,请重试！</span>");
                    }
                },
                error: function () {
                    alert('请求出错！')
                },
            });
            return false;
        }

        // 添加表单
        function check_form() {
            const pro_id = $.trim($('#pro_id').val());
            const name = $.trim($('#name').val());
            const path = $.trim($('#path').val());
            const team = $.trim($('#team').val());
            const type = $.trim($('#type').val());
            const dir = $.trim($('#DRI').val());

            // 判断输入的值
            if (!name) {
                alert('名字不能为空！');
                return false;
            }
            if (!path) {
                alert('路径不能为空！');
                return false;
            }
            if (!team) {
                alert('team不能为空！');
                return false;
            }
            // if (!type) {
            //     alert('type不能为空！');
            //     return false;
            // }
            if (!dir) {
                alert('dir不能为空！');
                return false;
            }
            var action= '';
            if(pro_id){
                action = 'update'
            }else {
                action = 'add'
            }
            const form_data = $('#form_data').serialize();
            // alert(form_data);
            // 异步提交数据到后台
            $.ajax({
                url: "{% url 'bugs:project' %}",
                data: {'form_data': form_data, "action": action},
                type: "post",
                beforeSend: function () {
                    $("#tip").html("<span style='color:blue'>正在处理...</span>");
                    return true;
                },
                success: function (data) {
                    if (data) {
                        var msg = '添加';
                        if (data == 'update') msg = '修改';
                        $("#tip").html("<span style='color:blueviolet'>恭喜，" + msg + "成功！</span>");
                        alert(msg + "OK！");
                        location.reload();
                    }
                    else {
                        if (data == -2) alert('项目名不能重复！');
                        $("#tip").html("<span style='color:blueviolet'>失败！请重试 </span>");
                        alert('操作失败');
                    }
                },
                error: function () {
                    alert('请求出错！');
                },
                complete: function () {
                    $('#acting_tips').hide();
                }
            });
            return false
        }

    </script>
    <!------------------------------------------------------------------------------->
{% endblock %}
